<!--  -->
<template>
<div class='rse'>
  <!-- 基本信息 -->
  <el-divider content-position="center" >基本信息</el-divider>
  <el-form :model="studentResume" status-icon  ref="studentInfo" label-width="100px" class="demo-ruleForm">
    <!--  -->
        <el-row>
          <el-col :span="21">
      <el-row :gutter="20">
      <el-col :span="5">
        <el-form-item label="姓名" >
          <el-input type="text" v-model="studentResume.name" autocomplete="off"></el-input>
        </el-form-item>
      </el-col>
      <el-col :span="5">
        <el-form-item label="手机号" >
          <el-input type="text" v-model="studentResume.phone" autocomplete="off"></el-input>
        </el-form-item>
      </el-col>
      <el-col :span="5">
        <el-form-item label="邮箱" >
          <el-input type="text" v-model="studentResume.email" autocomplete="off"></el-input>
        </el-form-item>
      </el-col>
      <el-col :span="5">
        <el-form-item label="性别" >
          <el-select v-model="studentResume.gender" placeholder="请选择性别">
            <el-option label="男" value="男"></el-option>
            <el-option label="女" value="女"></el-option>
          </el-select>
        </el-form-item>
      </el-col>
    </el-row>
    <el-row :gutter="20">
      <el-col :span="5">
        <el-form-item label="籍贯" >
          <el-input type="text" v-model="studentResume.address" autocomplete="off"></el-input>
        </el-form-item>
      </el-col>
      <el-col :span="5">
        <el-form-item label="毕业院校" >
          <el-input type="text" v-model="studentResume.graduation" autocomplete="off"></el-input>
        </el-form-item>
      </el-col>
      <el-col :span="5">
        <el-form-item label="专业" >
          <el-input type="text" v-model="studentResume.major" autocomplete="off"></el-input>
        </el-form-item>
      </el-col>
      <el-col :span="5">
        <el-form-item label="毕业时间" >
          <el-col :span="11">
            <el-date-picker type="date" placeholder="选择日期" v-model="studentResume.graduationDate" style="width: 180px;"></el-date-picker>
          </el-col>
        </el-form-item>
      </el-col>
    </el-row>
    <el-row :gutter="20">
      <el-col :span="5">
        <el-form-item label="工作意向" >
          <el-input type="text" v-model="studentResume.jobIntention" autocomplete="off"></el-input>
        </el-form-item>
      </el-col>
      <el-col :span="5">
        <el-form-item label="意向地点" >
          <el-input type="text" v-model="studentResume.addressIntention" autocomplete="off"></el-input>
        </el-form-item>
      </el-col>
      <el-col :span="5">
        <el-form-item label="工作状态" >
          <el-select v-model="studentResume.status" placeholder="请选择性别">
            <el-option label="应届生/在校" value="应届生/在校"></el-option>
            <el-option label="工作1-3年" value="工作1-3年"></el-option>
            <el-option label="工作3-10年" value="工作3-10年"></el-option>
            <el-option label="10年以上" value="10年以上"></el-option>
          </el-select>
        </el-form-item>
      </el-col>
      <el-col :span="5">
        <el-form-item label="爱好" >
          <el-input type="text" v-model="studentResume.hobby" autocomplete="off"></el-input>
        </el-form-item>
      </el-col>
    </el-row>
          </el-col>
          <el-col :span="3" >
              <el-image
                style="width: 150px; height: 200px"
                :src="studentResume.href"
                :fit="'fill'"
                >
                <div slot="error" class="image-slot">
               <i class="el-icon-picture-outline"></i>
                </div>
              </el-image>

          </el-col>

        </el-row>

        <el-form-item label="自我介绍" >
          <el-input type="textarea" v-model="studentResume.selfIntroduction1" maxlength="500"   show-word-limit  :autosize="{ minRows: 3, maxRows: 10}"></el-input>
        </el-form-item>
        <el-form-item label="主修课程" >
          <el-input   type="textarea" v-model="studentResume.selfIntroduction2" maxlength="500"   show-word-limit :autosize="{ minRows: 3, maxRows: 10}"></el-input>
        </el-form-item>
        <el-form-item label="自我评价" >
          <el-input   type="textarea" v-model="studentResume.selfIntroduction3"   maxlength="500"   show-word-limit :autosize="{ minRows: 3, maxRows: 10}"></el-input>
        </el-form-item>

    <el-row>
      <el-col>
        <el-form-item>
          <el-button type="primary" @click="saveStudentInfo">保存信息</el-button>
          <el-button @click="updateImg">修改头像</el-button>
        </el-form-item>
      </el-col>
    </el-row>
  </el-form>
    <!-- 个人技能 -->
  <el-divider content-position="center" >个人技能</el-divider>
  <el-form :model="studentResume">
    <el-form-item label="技能（技能是个人的亮点，最多可添加7个，搜索添加，不支持自定义）">
                        <el-select style="width: 60%;"
                        v-model="studentResume.skills"
                        size="medium"
                        :multiple-limit="7"
                        multiple
                        filterable
                         default-first-option
                         placeholder="请选择岗位标签">
                            <el-option
                            v-for=" (item, index) in postLabs"
                            :key="index"
                            :label="item"
                            :value="item">
                            </el-option>
                        </el-select>
                 </el-form-item>
  </el-form>

  <el-divider content-position="center" >校园活动</el-divider>
  <el-button
                type="success"
                plain
                size="small"
                icon="el-icon-edit"
                @click="addAction"
                >添加校园活动</el-button
                >
  <el-form :model="studentResume" v-for="(item,index) in studentResume.campusAction" :key="index"  label-width="100px">
    <el-form-item label="" >
      校园活动{{ index+1 }}
      </el-form-item>
      <el-form-item label="活动名" >
          <el-input type="text" v-model="item.name" autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item label="活动时间">
        <el-col :span="5">
          <el-date-picker type="date" placeholder="选择开始日期" v-model="item.begin" style="width: 100%;"></el-date-picker>
        </el-col>
        <el-col class="line" :span="2">-</el-col>
        <el-col :span="5">
          <el-date-picker type="date" placeholder="选择结束日期" v-model="item.end" style="width: 100%;"></el-date-picker>
        </el-col>
      </el-form-item>
      <el-form-item label="活动描述" >
          <el-input   type="textarea" v-model="item.description"   maxlength="500"   show-word-limit :autosize="{ minRows: 3, maxRows: 10}"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button @click="saveAction(item)">保存</el-button>
          <el-button @click="delAction(item)">删除</el-button>
        </el-form-item>
  </el-form>
  <!-- 工作经历 -->
  <el-divider content-position="center" >工作经历</el-divider>
  <el-button
                type="success"
                plain
                size="small"
                icon="el-icon-edit"
                @click="addJob"
                >添加工作经历</el-button
                >
  <el-form :model="studentResume" v-for="(item,index) in studentResume.jobExperience" :key="index"  label-width="100px">
    <el-form-item label="" >
      工作经历{{ index+1 }}
      </el-form-item>
      <el-form-item label="公司名称" >
          <el-input type="text" v-model="item.companyName" autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item label="职位名称" >
          <el-input type="text" v-model="item.position" autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item label="时间">
        <el-col :span="5">
          <el-date-picker type="date" placeholder="选择开始日期" v-model="item.begin" style="width: 100%;"></el-date-picker>
        </el-col>
        <el-col class="line" :span="2">-</el-col>
        <el-col :span="5">
          <el-date-picker type="date" placeholder="选择结束日期" v-model="item.end" style="width: 100%;"></el-date-picker>
        </el-col>
      </el-form-item>
      <el-form-item label="描述" >
          <el-input   type="textarea" v-model="item.description"   maxlength="500"   show-word-limit :autosize="{ minRows: 3, maxRows: 10}"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button @click="saveJob(item)">保存</el-button>
          <el-button @click="delJob(item)">删除</el-button>
        </el-form-item>
  </el-form>

  <!-- 项目经历 -->
  <el-divider content-position="center" >项目经历</el-divider>
  <el-button
                type="success"
                plain
                size="small"
                icon="el-icon-edit"
                @click="addProject"
                >添加项目经历</el-button
                >
  <el-form :model="studentResume" v-for="(item,index) in studentResume.projectExperience" :key="index"  label-width="100px">
    <el-form-item label="" >
      项目{{ index+1 }}
      </el-form-item>
      <el-form-item label="项目名称" >
          <el-input type="text" v-model="item.name" autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item label="担当角色" >
          <el-input type="text" v-model="item.position" autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item label="项目时间">
        <el-col :span="5">
          <el-date-picker type="date" placeholder="选择开始日期" v-model="item.begin" style="width: 100%;"></el-date-picker>
        </el-col>
        <el-col class="line" :span="2">-</el-col>
        <el-col :span="5">
          <el-date-picker type="date" placeholder="选择结束日期" v-model="item.end" style="width: 100%;"></el-date-picker>
        </el-col>
      </el-form-item>
      <el-form-item label="描述" >
          <el-input   type="textarea" v-model="item.description"   maxlength="500"   show-word-limit :autosize="{ minRows: 3, maxRows: 10}"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button @click="saveProject(item)">保存</el-button>
          <el-button @click="delProject(item)">删除</el-button>
        </el-form-item>
  </el-form>

  <!-- 证书 -->
  <el-divider content-position="center" >证书</el-divider>
  <el-button
                type="success"
                plain
                size="small"
                icon="el-icon-edit"
                @click="addCertificate"
                >添加证书</el-button
                >
  <el-form :model="studentResume" v-for="(item,index) in studentResume.certificate" :key="index"  label-width="100px">
    <el-form-item label="" >
      证书{{ index+1 }}
      </el-form-item>
      <el-form-item label="证书名称" >
          <el-input type="text" v-model="item.name" autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item label="证书编号" >
          <el-input type="text" v-model="item.number" autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item label="办法机构">
        <el-input type="text" v-model="item.issuingAuthority" autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item label="获取时间" >
        <el-date-picker type="date" placeholder="选择日期" v-model="item.time" style="width: 100%;"></el-date-picker>
      </el-form-item>
        <el-form-item>
          <el-button @click="saveCertificate(item)">保存</el-button>
          <el-button @click="delCertificate(item)">删除</el-button>
        </el-form-item>
  </el-form>
</div>
</template>

<script>
// 这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
// 例如：import 《组件名称》 from '《组件路径》';

export default {
// import引入的组件需要注入到对象中才能使用
  components: {},
  data () {
    // 这里存放数据
    return {
      studentResume: {

        skills: [],
        campusAction: [],
        jobExperience: [
        ],
        certificate: [],
        projectExperience: []

      },
      postLabs: [
        'python', 'java', 'mybatis', 'vue', 'mybatis-plus'
      ]
    }
  },
  // 监听属性 类似于data概念
  computed: {},
  // 监控data中的数据变化
  watch: {},
  // 方法集合
  methods: {
    saveStudentInfo () {},
    updateImg () {},
    addAction () {
      this.studentResume.campusAction.push(
        {
          name: '',
          begin: '',
          end: '',
          description: ''
        }
      )
    },
    addJob () {
      this.studentResume.jobExperience.push(
        {
          companyName: '',
          position: '',
          begin: '',
          end: '',
          description: ''
        }
      )
    },
    addProject () {
      this.studentResume.projectExperience.push(
        {
          name: '',
          position: '',
          begin: '',
          end: '',
          description: ''
        }
      )
    },
    addCertificate () {
      this.studentResume.certificate.push(
        {
          name: '',
          number: '',
          time: '',
          issuingAuthority: ''
        }
      )
    },
    saveAction (item) {},
    saveJob (item) {},
    saveProject (item) {
    },
    saveCertificate (item) {},
    delAction (item) {
      const index = this.studentResume.campusAction.indexOf(item)
      if (index !== -1) {
        this.studentResume.campusAction.splice(index, 1)
      }
    },
    delJob (item) {
      const index = this.studentResume.jobExperience.indexOf(item)
      if (index !== -1) {
        this.studentResume.jobExperience.splice(index, 1)
      }
    },
    delProject (item) {
      const index = this.studentResume.projectExperience.indexOf(item)
      if (index !== -1) {
        this.studentResume.projectExperience.splice(index, 1)
      }
    },
    delCertificate (item) {
      const index = this.studentResume.certificate.indexOf(item)
      if (index !== -1) {
        this.studentResume.certificate.splice(index, 1)
      }
    }
  },
  // 生命周期 - 创建完成（可以访问当前this实例）
  created () {
    // 此处有问题
    this.studentResume = this.$route.query.studentResume
    console.log('修改简历信息', this.$route.query.studentResume)
    // if (this.studentResume) {
    //   this.$store.commit('setStudentResume', this.studentResume)
    // } else {
    //   this.studentResume = this.$store.state.studentResume
    // }
  },
  // 生命周期 - 挂载完成（可以访问DOM元素）
  mounted () {

  },
  beforeCreate () {}, // 生命周期 - 创建之前
  beforeMount () {}, // 生命周期 - 挂载之前
  beforeUpdate () {}, // 生命周期 - 更新之前
  updated () {}, // 生命周期 - 更新之后
  beforeDestroy () {}, // 生命周期 - 销毁之前
  destroyed () {}, // 生命周期 - 销毁完成
  activated () {} // 如果页面有keep-alive缓存功能，这个函数会触发
}
</script>
<style lang='less' scoped>
//@import url(); 引入公共css类
.rse>.el-divider--horizontal{
  margin-top:50px
}
</style>
